<template>
  <view class="clone" style="background-color: #E4EBE9;">
    <view class="topnav">
      <image :src="imageUrl + '/wde/wdeGroup-281-1.png'" class="topnv-image" @click="getfh"></image>
      <text class="topnv-biaoti">我的文创</text>
    </view>
    <view class="top-nav">
      <view
        class="top-nav-view"
        v-for="(item, index) in navItems"
        :key="index"
        :class="{ active: index === currentIndex }"
        @tap="currentIndex = index"
      >
        {{ item }}
        <view class="underline" :style="{ backgroundColor: index === currentIndex? '#697E71' : underlineColor }"></view>
      </view>
    </view>
    <view class="content-box">
      <block v-for="(item, index) in getContent(currentIndex)" :key="index">
        <view v-if="index === 0" class="first-line-container">
          <text>{{ item.text }}</text>
          <view style="display: flex; justify-content: flex-end;">
            <view style="display: flex;">
            	<image :src="item.imageSrc1" style="width:106.8rpx;height:60rpx;margin-top:30%;"  @click="printFirstLineIndex(index)"></image>
				<image :src="item.imageSrc2" style="width:106.8rpx;height:60rpx;margin-top:30%;" ></image>
            </view>
          </view>
        </view>
        <view v-else class="second-line-container">
          <text>{{ item.text }}</text>
          <view style="display: flex; justify-content: flex-end;">
			  <view style="display: flex;">
				  <image :src="item.imageSrc1" style="width:106.8rpx;height:60rpx;margin-top:30%;"  @click="printSecondLineIndex(index)"></image>
				  <image :src="item.imageSrc2" style="width:106.8rpx;height:60rpx;margin-top:30%;"></image>
			  </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  imageUrl: this.$imageUrl,
      navItems: ['审核通过', '审核中', '审核未通过'],
      currentIndex: 0,
      underlineColor: '#D3D3D3',
      contents: [
        {
          items: [
            {
              text: '作品名称：东方七宿',
            imageSrc1: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1267.png',
			imageSrc2: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1268.png',
            },
            {
              text: '作品名称：东方七宿',
            imageSrc1: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1267.png',
            imageSrc2: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1268.png',
            }
          ]
        },
        {
          items: [
            {
              text: '作品名称：东方七宿',
            imageSrc1: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1267.png',
            imageSrc2: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1268.png',
            },
            {
              text: '作品名称：东方七宿',
            imageSrc1: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1267.png',
            imageSrc2: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1268.png',
            }
          ]
        },
        {
          items: [
            {
              text: '作品名称：东方七宿',
            imageSrc1: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1267.png',
            imageSrc2: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1268.png',
            },
            {
              text: '作品名称：东方七宿',
            imageSrc1: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1267.png',
            imageSrc2: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1268.png',
            }
          ]
        },
      ]
    };
  },
  methods: {
    getContent(index) {
      const content = this.contents[index];
      if (content) {
        return content.items;
      }
      return [];
    },
    getfh() {
      wx.redirectTo({
        url: '/pagesNew/pages-my/pages-my',
      });
    },
			 printFirstLineIndex(index) {
			      console.log(index);
			    },
			    printSecondLineIndex(index) {
			      console.log(index);
			    },
  }
};
</script>

<style>
.clone {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.topnav {
  width: 100%;
  height: 50rpx;
  display: flex;
  margin-top: 13%;
}

.topnv-image {
  width: 38rpx;
  height: 38rpx;
  margin-top: 1%;
  margin-left: 3%;
}

.topnv-biaoti {
  width: 128rpx;
  height: 48rpx;
  margin-top: 1%;
  margin-left: 35%;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #3F5649;
  line-height: 38rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.top-nav {
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
  padding: 5px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.top-nav::-webkit-scrollbar {
  display: none;
}

.top-nav-view {
  position: relative;
  padding: 30rpx;
  min-width: 80px;
  text-align: center;
  color: #C0C0C0;
  width: 120px;
}

.underline {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
}

.top-nav-view.active {
  color: #697E71;
}

.content-box {
  margin-top: 5%;
  margin-left: 10%;
  width: 80vw;
  font-size: 18px;
  line-height: 4;
  color: #333;
  border-radius: 5px;
  white-space: pre-line; /* 允许换行显示 */
}

.first-line-container {
  display: flex;
  flex-direction: column;
  height: 165.52rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 30rpx;
  color: #333333;
  line-height: 35rpx;
  font-style: normal;
  text-transform: none;
  padding-top: 30rpx;
  padding-left: 30rpx;
  background-color: #fff;
  border-radius: 5px;
}

.second-line-container {
  display: flex;
  flex-direction: column;
  height: 165.52rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 30rpx;
  color: #333333;
  line-height: 35rpx;
  font-style: normal;
  text-transform: none;
  margin-top: 50rpx;
  padding-top: 30rpx;
  padding-left: 30rpx;
  background-color: #fff;
  border-radius: 5px;
}
</style>